<template>
  <el-table
    :data="rows"
    :border="border"
    :stripe="stripe"
    :size="size" 
    v-loading="loading"
    :style="{ height: px(height) }"
  >
    <!-- 左侧基础列（可选） -->
    <el-table-column
      v-if="showIndex"
      type="index"
      width="60"
      label="#"
      fixed="left"
    />
    <el-table-column
      v-if="nameProp"
      :prop="nameProp"
      :label="nameLabel"
      min-width="160"
      fixed="left"
      show-overflow-tooltip
    />

    <!-- 动态分组列 -->
    <template v-for="(group, gi) in columns" :key="gi">
      <el-table-column :label="group.label" align="center">
        <template v-for="(col, ci) in group.children" :key="gi + '-' + ci">
          <el-table-column
            :prop="col.prop"
            :label="col.label"
            :min-width="col.minWidth || 120"
            :width="col.width"
            :align="col.align || 'center'"
            :formatter="col.formatter || defaultFormatter"
            show-overflow-tooltip
          />
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup>
import { toRefs } from 'vue'

const props = defineProps({
  /** 表格分组列配置：[{ label, children: [{prop,label,...}] }] */
  columns: { type: Array, default: () => [] },
  /** 行数据 */
  rows: { type: Array, default: () => [] },

  /** 左侧名称列 */
  nameProp: { type: String, default: 'assetName' },
  nameLabel: { type: String, default: '设备名称' },

  showIndex: { type: Boolean, default: true },
  loading: { type: Boolean, default: false },
  size: { type: String, default: 'small' },
  stripe: { type: Boolean, default: true },
  border: { type: Boolean, default: true },
  height: { type: [Number, String], default: '72vh' },
})

const px = v => (typeof v === 'number' ? `${v}px` : v)

/** 默认单元格格式化：null/'' -> '-'，数字保留两位 */
function defaultFormatter(row, column, cellValue) {
  if (cellValue === null || cellValue === undefined || cellValue === '') return '-'
  if (typeof cellValue === 'number') {
    return Number.isInteger(cellValue) ? cellValue : cellValue.toFixed(2)
  }
  return cellValue
}
</script>
